<template>
    <div class="e-tooltip input-auto-resize forbid-select no-wrap" ref="eTooltipRef" :style="props.customerStyle"
        spellcheck="false">
        <div :style="`width: ${$slots.suffix ? 'calc(100% - 32px)' : '100%'}; `" class="tooltip-content no-wrap">
            <p :class="['el-input__inner', 'disabled-style', alignCenter ? 'tip-center' : '', customerClass, 'no-wrap']"
                v-if="modelValue" @mouseenter.stop="visibilityChange($event)" ref="tooltipRef" @mouseleave.stop="leave"
                @dblclick="copy">
                {{ modelValue }}
            </p>
            <p :class="['el-input__inner', 'disabled-style', alignCenter ? 'tip-center' : '', customerClass, 'placeholder']"
                v-if="!modelValue">
                {{ props.placeholder }}
            </p>
        </div>
        <div class="suffix cursor-pointer" v-if="$slots.suffix" ref="suffixRef">
            <slot name="suffix"></slot>
        </div>
        <Teleport to="body">
            <!-- @mouseenter.stop="enterTips" @mouseleave.stop="leave" -->
            <div v-show="overWidth && showTips" class="show-tip flex-display-center font-auto-resize forbid-select"
                ref="tipsRef">
                {{ modelValue }}
            </div>
        </Teleport>
    </div>
</template>
<script setup>
import { useCopyText } from "@usehook"
import { getElementSize } from "@/utils/tools"

const props = defineProps({
    modelValue: { type: [String, Number, Object], default: '' }, // 字符内容
    customerClass: { type: String, default: '' },
    customerStyle: { type: String, default: '' },
    placeholder: { type: String, default: '' },
    dblcopy: { type: Boolean, default: false },
    showTips: { type: Boolean, default: false },
    border: { type: Boolean, default: false },
    alignCenter: { type: Boolean, default: false }
})

const copy = () => {
    if (props.dblcopy && props.modelValue) useCopyText(props.modelValue)
}

const tooltipRef = $ref(null)
let overWidth = $ref(false)
let timeout = $ref(null)
let eTooltipRef = $ref(null)
let tipsRef = $ref(null)
const visibilityChange = (event) => {
    if (!props.showTips) return
    clearTimeout(timeout)
    const ev = event.target;
    let eventWidth = ev.offsetWidth; // 文本的实际宽度
    overWidth = eventWidth < tooltipRef.scrollWidth
    const refEle = getElementSize(eTooltipRef)
    const refWidth = refEle.width
    const left = tooltipRef.scrollWidth > refWidth ? (tooltipRef.scrollWidth - refWidth) / 2 : 0
    tipsRef.style.top = (refEle.top - refEle.height) + "px"
    tipsRef.style.width = (tooltipRef.scrollWidth - 10) + "px"
    tipsRef.style.minWidth = (refWidth - 10) + "px"
    tipsRef.style.left = (refEle.left - left) + "px"
    tipsRef.style.transform = `translateX(0px)`
    nextTick(() => {
        const position = getElementSize(tipsRef)
        const maxRight = position.left + position.width
        // 修复最右边的偏移量
        if (maxRight > window.innerWidth) {
            tipsRef.style.transform = `translateX(${window.innerWidth - maxRight - 5}px)`
        }
        if (position.left < 0) {
            tipsRef.style.transform = `translateX(${-1 * (position.left - 5)}px)`
        }
    })
}

watch(() => props.border, border => {
    nextTick(() => {
        eTooltipRef.style.boxShadow = border ? "0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset" : "none"
    })
}, { immediate: true })

const enterTips = () => {
    if (!props.showTips) return
    clearTimeout(timeout)
}

const leave = () => {
    if (!props.showTips) return
    timeout = setTimeout(() => {
        overWidth = false
    }, 100);
}

let suffixRef = $ref(null)
const instance = getCurrentInstance()
watch(() => suffixRef, newEle => {
    if (newEle) {
        let showSuffix = false
        for (let children of newEle.children) {
            if (children.style.display !== 'none') {
                showSuffix = true
            }
        }
        if (!showSuffix) {
            newEle.parentElement.removeChild(newEle)
            instance.proxy.$el.querySelector('.tooltip-content').style.width = "100%"
        }
    }
}, { immediate: true })
</script>

<style>
.e-tooltip .disabled-style {
    background-color: transparent !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    padding: 0 10px;
    width: 100%;
    text-overflow: ellipsis;
    line-height: calc(var(--font-size) * 2);
    color: #a0a0a0
}

.e-tooltip {
    position: relative;
    display: inline-flex;
    width: 100%;
    vertical-align: middle;
    /* box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset; */
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
}

.e-tooltip p {
    margin: 0;
}

.e-tooltip .placeholder {
    color: #c2c6cd;
}

.e-tooltip .suffix {
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* box-shadow: 1px 0px 0px 0px var(--el-input-border-color, var(--el-border-color)) inset; */
    color: var(--el-input-icon-color, var(--el-text-color-placeholder));
    cursor: pointer;
}

.e-tooltip .suffix .el-icon {
    height: 100%;
    width: 100%;
}

.e-tooltip .tip-center {
    display: inline-block;
    align-items: center;
    text-align: center;
}

.show-tip {
    position: absolute;
    top: calc(var(--font-size)* -1.8 - 2px);
    background: #303133;
    color: #fff;
    border-radius: var(--border-radius);
    padding: 0 5px;
    z-index: 9999999999;
}
</style>